<template>
	<view class="travelApply-bill">
		<view class="top">
			<text class="title">单据模版</text>
			<view class="template-box">
				<view class="left">
					<icon-svg icon-class="shenqing"/>
					<text style="color:#595959;">出差申请</text>
				</view>
				<view class="right">
					<navigator url="./billsTemplate">
						<text style="color:#FFA07A;font-size: 30rpx;">切换模版</text>
					</navigator>
				</view>
			</view>
		</view>
		<view class="center">
			<form  class="handFormBox" @submit="formSubmit" @reset="formReset">
				<view class="uni-form-item" v-for="(item, index) in formList" :key="index">
					<!-- <view v-if="item.title==='申请金额'" class="">
						<view class="title">{{item.title}}:</view>
						<view style="display: flex;">
							<text style="margin-right: 4rpx;">CNY></text>
							<input class="uni-input" v-model="item.value" 
								:name="item.name" :placeholder="item.placeholder" 
							/>
						</view>
					</view> -->
					<view  v-if="item.title==='申请日期'" class="">
						<view class="title">{{item.title}}:</view>
						<view>
							<input class="uni-input" v-model="item.value" disabled="true"
								:name="item.name" :placeholder="item.placeholder" 
							/>
						</view>
					</view>
					<view v-else>
						<view class="title">{{item.title}}:</view>
						<view>
							<input class="uni-input" v-model="item.value" 
								:name="item.name" :placeholder="item.placeholder" 
							/>
						</view>
					</view>
					
				</view>
			</form>
		</view>
		<view class="op">
			<view class="remark">
				<text style="margin-left: 20rpx;">费用明细·明细列表</text>
				<icon-svg icon-class="icon-test6" />
			</view>
			<view class="list">
				<uni-grid v-for="(item, index) in listItem" :key="index"
					class="listItem" :column="4" :show-border="false" :square="false">
					<!-- <uni-grid-item class="checkItem">
						<evan-checkbox :checked="item.checked"></evan-checkbox>
					</uni-grid-item> -->
					<uni-grid-item  class="icon">
						<view class="iconBox" :style="{backgroundColor: item.iconbg}">
							<icon-svg :icon-class="item.iconClass" /></span>
						</view>
					</uni-grid-item>
					<uni-grid-item class="content">
						<view>
							<view>
								<text class="conTitle">{{item.conTitle}}</text>
								<text class="conSubTitle">{{item.conSubTitle}}</text>
							</view>
							<view>{{item.date}}</view>
							<view>{{item.cause}}</view>
							<text>{{item.causeBy}}</text>
						</view>
					</uni-grid-item>
					<uni-grid-item class="price">
						<text>CNY{{item.price}}</text>
					</uni-grid-item>
				</uni-grid>
			</view>
			<!-- <view class="op-box">
				<span><navigator url="./selectCostType">添加明细</navigator></span>
				<span>
					<navigator url="./selectCostType">导入明细</navigator>
				</span>
			</view> -->
		</view>
		<view class="footer">
			<button >存为草稿</button>
			<button style="background:#FFA07A;color:#fff;" @click="handleSubmit">提交送审</button>
		</view>
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog @confirm="confirm" type="success" title="提交成功,请耐心等待审批"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue';
	export default {
		components: {
			uniPopup,
			uniPopupDialog
		},
		data() {
			return {
				listItem: [
					{
						checked: 'true',
						iconClass: 'feiji1',
						conTitle: '机票费',
						conSubTitle: '（COST30）',
						iconbg: '#F8A41D',
						date: '2020-12-29',
						cause: '消费是由：',
						causeBy: '无',
						// price: '1,999.00'
					}
				],
				formList:[
					{'title': '申请事项','placeholder': '请输入标题','name': 'input','value': '出差申请'},
					{'title': '申请人','placeholder': '请输入名称','name': 'input','value': '陈赫斯'},
					{'title': '申请日期','placeholder': '请输入日期','name': 'input','value': '2020-12-27'},
					{'title': '申请单位','placeholder': '请选择费用承担单位','name': 'input','value': '时代邻里股份有限公司'},
					{'title': '申请部门','placeholder': '','name': 'input','value': '公共部门'},
					{'title': '申请金额','placeholder': '请输入借款金额','name': 'input','value': ''},
				],
				money: 0
			};
		},
		created() {
			this.getCurTimes()
		},
		onLoad(option) {
			// if(JSON.stringify(option) === '{}') return
			if(Object.keys(option).length === 0) return 
 			const money = JSON.parse(decodeURIComponent(option.money));
			if(money) {
				this.formList.map(item => {
					if(item.title === "申请金额") {
						item.value = money
					}
				}) 
			}
			this.money = money				
		},
		methods: {
			getCurTimes() {
				let day = new Date()
				day.setTime(day.getTime())
				let s = day.getFullYear()+"-" + (day.getMonth()+1) + "-" + day.getDate()
				this.formList.map(item => {
					if(item.title === "申请日期") {
						item.value = s
					}
				})
				this.listItem.map(item => {
					item.date = s
				})
			},
			handleSubmit() {
				this.$refs.popup.open()
			},
			confirm(done){
				done()
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/add/travelApplyBill/travelApplyBillData?money='+this.money
					})
				}, 300)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list{
		box-sizing: border-box;
		padding: 0 10px;
		.listItem{
			padding: 15px 0;
			border-bottom: 1px solid #eee;
			.checkItem{
				width: 7%!important;
				height:auto;
				padding-top: 10px;
			}
			.icon{
				width: 13%!important;
				height:auto;
				.iconBox{
					width: 40px;
					height: 40px;
					line-height: 40px;
					text-align: center;
					font-size: 24px;
					border-radius: 50%;
					color: #fff;
					// background-color: #F8A41D;
				}
			}
			.content{
				width: 50%!important;
				height:auto;
				color: #666;
				font-size: 16px;
				.conTitle{
					color: #333333;
					font-weight: 600;
					font-size: 18px;
				}
				.conSubTitle{
					color: #666;
					font-size: 18px;
				}
			}
			.price{
				width:30%!important;
				height:auto;
				font-size: 16px;
				color: #333;
				font-weight: bold;
			}
		}
	}
.travelApply-bill{
	margin-bottom: 100px;
	position:relative;
	.top{
		background-color: #fff;
		.title{
			margin: 20rpx 0 0 20rpx;
			color: #ccc;
			display: inline-block;
		}
		.template-box{
			padding: 10rpx 20rpx;
			display: flex;
			justify-content: space-between;
			line-height: 60rpx;
			height: 60rpx;
			.left{
				.svg-icon{
					color:#FFA07A;
					font-size: 1.4em;
				}
				text{
					margin-left: 14rpx;
				}
			}
		}
	}
	.center{
		background-color: #fff;
		margin-top: 20rpx;
		.handFormBox{
		 .uni-form-item{
			 padding:12rpx 20rpx;
			 color: #595959;
			 font-size: 34rpx;
			 border-bottom: 1px solid #EEEEEE;
			 .title{
				 padding: 10rpx 0;
			 }
			.title::before{
				content: '*';
				color:red;
			} 
			.uni-input-placeholder{
				color: #ccc;
				margin-left: 10rpx;
			}
		 }
		}
	}
	.op{
		background-color: #fff;
		margin-top: 20rpx;
		.remark{
		 line-height: 100rpx;
		 height: 100rpx;	
		}
		.op-box{
		  line-height: 100rpx;
		  height: 100rpx;
		  border-top: 1px solid #ccc;
		  span{
				width: 49%;
				text-align: center;
				display: inline-block;
				color:#FFA07A;
			}
		}
	}
	.footer{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		background-color: #fff;
		padding: 20rpx ;
		button{
			width: 100%;
		}
	}
}
</style>
